<#include "/common/taglibs.ftl" />
<title>Dialog Demo</title>
<div class="m-portlet">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    SweetAlert Examples
                </h3>
            </div>
        </div>
    </div>
    <div class="m-portlet__body">
        <table class="table table-bordered">
            <tbody><tr>
                <td style="width: 40%; vertical-align: middle;">Case</td>
                <td>
                    Swal
                </td>
                <td>
                    $.m.xxx
                </td>
            </tr>
            <tbody><tr>
                <td style="width: 40%; vertical-align: middle;">1. Basic alert</td>
                <td>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_1"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo2_1"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">2. Alert title and text</td>
                <td>
                    <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_2"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo2_2"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">3. Enable <code>warning</code>, <code>error</code>, <code>success</code>, <code>info</code> and <code>question</code> state icons</td>
                <td>
                    <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_3_1"> Warning</button>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_3_2"> Error</button>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_3_3"> Success</button>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_3_4"> Info</button>
                    <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_3_5"> Question</button>
                </td>
                <td>
                    <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo2_3_1"> Warning</button>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo2_3_2"> Error</button>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo2_3_3"> Success</button>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo2_3_4"> Info</button>
                    <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo2_3_5"> Question</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">4. Change confirm button text and class</td>
                <td>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_4"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo2_4"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">5. Custom button with icon</td>
                <td>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_5"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo2_5"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">6. A custom positioned dialog with timer to auto close</td>
                <td>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_6"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo2_6"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">7. jQuery HTML with custom animate.css animation </td>
                <td>
                    <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_7"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo2_7"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">8. A warning message, with a function attached to the confirm button</td>
                <td>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_8"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo2_8"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">9. By passing a parameter, you can execute something else for cancel</td>
                <td>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_9"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo2_9"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">10. A message with a custom image and CSS animation disabled</td>
                <td>
                    <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_10"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo2_10"> Show me</button>
                </td>
            </tr>
            <tr>
                <td style="width: 40%; vertical-align: middle;">11. A message with auto close timer</td>
                <td>
                    <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_11"> Show me</button>
                </td>
                <td>
                    <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo2_11"> Show me</button>
                </td>
            </tr>
            </tbody></table>
    </div>
</div>
<page-script>
    <script>
        //http://mishengqiang.com/sweetalert/

        function initSweetAlert(){
            $('#m_sweetalert_demo_1').click(function(e) {
                swal('Good job!');
            });

            //== Sweetalert Demo 2
            $('#m_sweetalert_demo_2').click(function(e) {
                swal("Here's the title!", "...and here's the text!");
            });

            //== Sweetalert Demo 3
            $('#m_sweetalert_demo_3_1').click(function(e) {
                swal("Good job!", "You clicked the button!", "warning");
            });

            $('#m_sweetalert_demo_3_2').click(function(e) {
                swal("Good job!", "You clicked the button!", "error");
            });

            $('#m_sweetalert_demo_3_3').click(function(e) {
                swal("Good job!", "You clicked the button!", "success");
            });

            $('#m_sweetalert_demo_3_4').click(function(e) {
                swal("Good job!", "You clicked the button!", "info");
            });

            $('#m_sweetalert_demo_3_5').click(function(e) {
                swal("Good job!", "You clicked the button!", "question");
            });

            //== Sweetalert Demo 4
            $('#m_sweetalert_demo_4').click(function(e) {
                swal({
                    title: "Good job!",
                    text: "You clicked the button!",
                    icon: "success",
                    confirmButtonText: "Confirm me!",
                    confirmButtonClass: "btn btn-focus m-btn m-btn--pill m-btn--air"
                });
            });

            //== Sweetalert Demo 5
            $('#m_sweetalert_demo_5').click(function(e) {
                swal({
                    title: "Good job!",
                    text: "You clicked the button!",
                    icon: "success",

                    confirmButtonText: "<span><i class='la la-headphones'></i><span>I am game!</span></span>",
                    confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",

                    showCancelButton: true,
                    cancelButtonText: "<span><i class='la la-thumbs-down'></i><span>No, thanks</span></span>",
                    cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon"
                });
            });

            $('#m_sweetalert_demo_6').click(function(e) {
                swal({
                    position: 'top-right',
                    type: 'success',
                    title: 'Your work has been saved',
                    showConfirmButton: false,
                    timer: 1500
                });
            });

            $('#m_sweetalert_demo_7').click(function(e) {
                swal({
                    title: 'jQuery HTML example',
                    html: $('<div>')
                            .addClass('some-class')
                            .text('jQuery is everywhere.'),
                    animation: false,
                    customClass: 'animated tada'
                })
            });

            $('#m_sweetalert_demo_8').click(function(e) {
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!'
                }).then(function(result) {
                    if (result.value) {
                        swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                        )
                    }
                });
            });

            $('#m_sweetalert_demo_9').click(function(e) {
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    reverseButtons: true
                }).then(function(result){
                    if (result.value) {
                        swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                        )
                        // result.dismiss can be 'cancel', 'overlay',
                        // 'close', and 'timer'
                    } else if (result.dismiss === 'cancel') {
                        swal(
                                'Cancelled',
                                'Your imaginary file is safe :)',
                                'error'
                        )
                    }
                });
            });

            $('#m_sweetalert_demo_10').click(function(e) {
                swal({
                    title: 'Sweet!',
                    text: 'Modal with a custom image.',
                    imageUrl: 'https://unsplash.it/400/200',
                    imageWidth: 400,
                    imageHeight: 200,
                    imageAlt: 'Custom image',
                    animation: false
                });
            });

            $('#m_sweetalert_demo_11').click(function(e) {
                swal({
                    title: 'Auto close alert!',
                    text: 'I will close in 5 seconds.',
                    timer: 5000,
                    onOpen: function() {
                        swal.showLoading()
                    }
                }).then(function(result) {
                    if (result.dismiss === 'timer') {
                        console.log('I was closed by the timer')
                    }
                })
            });
        };


        function initMAlert(){
            $('#m_sweetalert_demo2_1').click(function(e) {
                $.m.alert('Good job!');
            });

            $('#m_sweetalert_demo2_2').click(function(e) {
                $.m.alert("Here's the title!", "...and here's the text!");
            });

            // demo3
            $('#m_sweetalert_demo2_3_1').click(function(e) {
                $.m.alert("Good job!", "You clicked the button!", "warning");
            });

            $('#m_sweetalert_demo2_3_2').click(function(e) {
                $.m.alert("Good job!", "You clicked the button!", "error");
            });

            $('#m_sweetalert_demo2_3_3').click(function(e) {
                $.m.alert("Good job!", "You clicked the button!", "success");
            });

            $('#m_sweetalert_demo2_3_4').click(function(e) {
                $.m.alert("Good job!", "You clicked the button!", "info");
            });

            $('#m_sweetalert_demo2_3_5').click(function(e) {
                $.m.alert("Good job!", "You clicked the button!", "question");
            });

            $('#m_sweetalert_demo2_4').click(function(e) {
                $.m.alert({
                    title: "Good job!",
                    text: "You clicked the button!",
                    icon: "success",
                    confirmButtonText: "Confirm me!",
                    confirmButtonClass: "btn btn-focus m-btn m-btn--pill m-btn--air"
                });
            });

            $('#m_sweetalert_demo2_5').click(function(e) {
                $.m.alert({
                    title: "Good job!",
                    text: "You clicked the button!",
                    icon: "success",

                    confirmButtonText: "<span><i class='la la-headphones'></i><span>I am game!</span></span>",
                    confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",

                    showCancelButton: true,
                    cancelButtonText: "<span><i class='la la-thumbs-down'></i><span>No, thanks</span></span>",
                    cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon"
                });
            });

            $('#m_sweetalert_demo2_6').click(function(e) {
                $.m.alert({
                    position: 'top-right',
                    type: 'success',
                    title: 'Your work has been saved',
                    showConfirmButton: false,
                    timer: 1500
                });
            });

            $('#m_sweetalert_demo2_7').click(function(e) {
                $.m.alert({
                    title: 'jQuery HTML example',
                    html: $('<div>')
                            .addClass('some-class')
                            .text('jQuery is everywhere.'),
                    animation: false,
                    customClass: 'animated tada'
                })
            });

            $('#m_sweetalert_demo2_8').click(function(e) {
                $.m.confirm({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    callback: function(result){
                        console.log('callback', result);
                        if (result.value) {
                            $.m.alert(
                                    'Deleted!',
                                    'Your file has been deleted.',
                                    'success'
                            )
                        }
                    }
                });
            });

            $('#m_sweetalert_demo2_9').click(function(e) {
                $.m.confirm({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    reverseButtons: true,
                    callback: function(result){
                        if (result.value) {
                            $.m.alert(
                                    'Deleted!',
                                    'Your file has been deleted.',
                                    'success'
                            )
                            // result.dismiss can be 'cancel', 'overlay',
                            // 'close', and 'timer'
                        } else if (result.dismiss === 'cancel') {
                            $.m.alert(
                                    'Cancelled',
                                    'Your imaginary file is safe :)',
                                    'error'
                            )
                        }
                    }
                });
            });

            $('#m_sweetalert_demo2_10').click(function(e) {
                $.m.alert({
                    title: 'Sweet!',
                    text: 'Modal with a custom image.',
                    imageUrl: 'https://unsplash.it/400/200',
                    imageWidth: 400,
                    imageHeight: 200,
                    imageAlt: 'Custom image',
                    animation: false
                });
            });

            $('#m_sweetalert_demo2_11').click(function(e) {
                $.m.alert({
                    title: 'Auto close alert!',
                    text: 'I will close in 5 seconds.',
                    timer: 5000,
                    onOpen: function () {
                        swal.showLoading()
                    },
                    callback: function (result) {
                        if (result.dismiss === 'timer') {
                            console.log('I was closed by the timer')
                        }
                    }
                });
            });
        }

        jQuery(function ($) {
            initSweetAlert();
            initMAlert();
        });
    </script>

</page-script>